<template>
  <div
    class="query-form"
    v-show="visible"
    :style="formStyle"
    ref="queryFormRef"
  >
    <div class="form-header" ref="headerRef">
      <div class="title">查询结果</div>
      <el-button link class="close-btn" @click="closeForm">
        <el-icon><Close /></el-icon>
      </el-button>
    </div>
    <div class="tab-container">
      <div class="tab-header">
        <div
          v-for="tab in tabs"
          :key="tab.name"
          :class="['tab-item', { active: activeTab === tab.name }]"
          @click="activeTab = tab.name"
        >
          {{ tab.label }}
        </div>
      </div>
      <div class="tab-content">
        <!-- 事件统计标签页 -->
        <div v-show="activeTab === 'list'" class="tab-pane">
          <div class="table-container">
            <el-table
              :data="currentPageData"
              :border="false"
              table-layout="auto"
              :header-cell-style="{
                background: '#f5f7fa',
                color: '#606266',
                borderBottom: '1px solid #EBEEF5',
                borderTop: 'none',
                fontWeight: 'normal',
              }"
              :cell-style="{
                borderBottom: '1px solid #EBEEF5',
                padding: '8px 0',
              }"
            >
              <el-table-column
                prop="eventId"
                label="事件编号"
                min-width="140"
              />
              <el-table-column
                prop="eventType"
                label="事件类型"
                min-width="80"
              />
              <el-table-column
                prop="eventLevel"
                label="事件等级"
                min-width="80"
              />
              <el-table-column
                prop="eventTime"
                label="发生时间"
                min-width="140"
              />
              <el-table-column
                prop="eventLocation"
                label="发生地点"
                min-width="100"
              />
              <el-table-column
                prop="carNumber"
                label="车牌号"
                min-width="100"
              />
              <el-table-column prop="driver" label="驾驶员" min-width="80" />
              <el-table-column label="处理状态" min-width="100">
                <template #default="scope">
                  <el-select
                    v-model="scope.row.processStatus"
                    placeholder="处理状态"
                    size="small"
                    @change="handleStatusChange(scope.row)"
                  >
                    <el-option :value="'0'" label="待处理" />
                    <el-option :value="'1'" label="处理中" />
                    <el-option :value="'2'" label="已处理" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80">
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="viewEventOnMap(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination-container" v-if="totalItems > pageSize">
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="totalItems"
              @current-change="handlePageChange"
            />
          </div>
        </div>

        <!-- 统计图表标签页 -->
        <div v-show="activeTab === 'chart'" class="tab-pane">
          <div class="chart-container">
            <div ref="chartRef" class="chart"></div>
          </div>
        </div>

        <!-- 热力图标签页 -->
        <div v-show="activeTab === 'heatmap'" class="tab-pane">
          <div class="heatmap-container">
            <div class="settings-panel">
              <div class="setting-item">
                <span class="setting-label">显示热点图:</span>
                <el-switch v-model="heatmapSettings.showHeatmap" />
              </div>
              <div class="setting-item" v-if="heatmapSettings.showHeatmap">
                <span class="setting-label">热点半径(radius size):</span>
                <el-slider
                  v-model="heatmapSettings.radius"
                  :min="5"
                  :max="50"
                  :step="1"
                />
              </div>
              <div class="setting-item" v-if="heatmapSettings.showHeatmap">
                <span class="setting-label">模糊尺寸(blur size):</span>
                <el-slider
                  v-model="heatmapSettings.blur"
                  :min="5"
                  :max="50"
                  :step="1"
                />
              </div>
            </div>
            <div ref="heatmapRef" class="heatmap"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { useMapStore } from '@/stores/MapStore'
import { Close } from '@element-plus/icons-vue'
import updatePoint from '../../apis/updatePoint'

const mapStore = useMapStore()

// DOM引用
const queryFormRef = ref(null)
const headerRef = ref(null)

// 表单位置样式 - 固定位置在底部中央
const formStyle = ref({
  left: '50%',
  bottom: '0',
  transform: 'translateX(-50%)',
})

// 是否显示表单
const visible = ref(false)

// 标签页状态
const activeTab = ref('list')

// 标签定义
const tabs = [
  { name: 'list', label: '事件统计' },
  { name: 'chart', label: '统计图表' },
  { name: 'heatmap', label: '热力图' },
]

// 图表引用
const chartRef = ref(null)
const heatmapRef = ref(null)
let chart = null
let heatmap = null

// 事件数据及原始数据
const eventData = ref([])
const originalFeatures = ref([]) // 存储原始的地图要素，用于查看功能

// 分页设置
const currentPage = ref(1)
const pageSize = ref(8) // 限制为最多显示8条记录
const totalItems = computed(() => eventData.value.length)

// 当前页数据
const currentPageData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  return eventData.value.slice(startIndex, endIndex)
})

// 页面变化处理
const handlePageChange = (page) => {
  currentPage.value = page
}

// 格式化处理状态
const formatProcessStatus = (row, column, cellValue) => {
  if (cellValue === '0') return '未处理'
  if (cellValue === '1') return '处理中'
  if (cellValue === '2') return '已处理'
  return cellValue
}

// 处理状态变更
const handleStatusChange = (row) => {
  try {
    console.log('状态更新:', row)

    // 检查feature获取过程
    console.log('-----开始查找要素-----')
    const feature = findFeatureByEvent(row)
    console.log('-----查找要素结束-----')

    if (!feature) {
      ElMessage.error('未找到对应要素')
      return
    }

    // 获取要素ID和坐标
    const fid = feature.getId()
    console.log('要素ID:', fid)

    // 获取几何对象并提取坐标
    const geometry = feature.getGeometry()
    if (!geometry) {
      ElMessage.error('要素没有几何信息')
      return
    }

    console.log('几何类型:', geometry.getType())

    // 获取坐标并确保是有效的
    let position
    try {
      position = geometry.getCoordinates()
      console.log('原始坐标:', position)

      // 确保坐标是平面数组
      if (
        Array.isArray(position) &&
        position.length === 2 &&
        typeof position[0] === 'number'
      ) {
        // [x, y] 格式的坐标，正确格式
        console.log('坐标格式正确')
      } else {
        console.log('坐标格式需要处理')
        // 处理可能的嵌套数组
        if (
          Array.isArray(position) &&
          Array.isArray(position[0]) &&
          position[0].length === 2
        ) {
          position = position[0]
        } else if (
          Array.isArray(position) &&
          Array.isArray(position[0]) &&
          Array.isArray(position[0][0])
        ) {
          position = position[0][0]
        }
        console.log('处理后坐标:', position)
      }
    } catch (error) {
      console.error('获取坐标失败:', error)
      ElMessage.error('无法获取要素坐标')
      return
    }

    // 获取现有属性
    const values = feature.get('values_')
    console.log(
      '原始values类型:',
      typeof values,
      Array.isArray(values) ? '是数组' : '不是数组'
    )
    console.log('原始属性值:', values)

    if (!values) {
      ElMessage.error('要素没有属性信息')
      return
    }

    // 准备新的属性数组
    let attValue

    try {
      // 根据values的类型决定如何处理
      if (Array.isArray(values)) {
        // 如果是数组，创建副本并更新处理状态
        attValue = [...values]
        attValue[7] = row.processStatus
        console.log('更新后的属性数组:', attValue)
      } else if (typeof values === 'object') {
        // 如果是对象，创建包含所需属性的数组
        attValue = [
          values.事件编号 || '',
          values.事件类型 || '',
          values.事件等级 || '',
          values.发生时间 || '',
          values.发生地点 || '',
          values.车牌号 || '',
          values.驾驶员 || '',
          row.processStatus, // 更新处理状态
        ]
        console.log('从对象创建的属性数组:', attValue)
      } else {
        throw new Error('无法处理的属性类型: ' + typeof values)
      }
    } catch (error) {
      console.error('处理属性时出错:', error)
      ElMessage.error('处理要素属性失败')
      return
    }

    // 获取文档图层
    const docLayer = mapStore.getDocLayer()
    if (!docLayer) {
      ElMessage.error('未找到文档图层')
      return
    }

    console.log('准备调用updatePoint，参数:', {
      position,
      fid,
      attValue,
      layerIndex: 4,
    })

    // 调用updatePoint API更新要素 - updatePoint.js会根据处理状态自动设置颜色
    updatePoint({
      position: position,
      fid: fid,
      layer: docLayer,
      attValue: attValue,
      layerIndex: 4, // 事件图层索引
    })
      .then((result) => {
        console.log('更新结果:', result)
        if (result) {
          // 更新成功，刷新查询结果
          mapStore.clearEventGraphics()

          // 等待图层刷新后重新高亮显示当前要素
          setTimeout(() => {
            viewEventOnMap(row)
          }, 300)
        }
      })
      .catch((error) => {
        console.error('更新处理状态失败:', error)
        ElMessage.error('更新处理状态失败')
      })
  } catch (error) {
    console.error('更新状态失败:', error)
    ElMessage.error('更新状态失败: ' + (error.message || '未知错误'))
  }
}

// 热力图设置
const heatmapSettings = ref({
  showHeatmap: true,
  radius: 20,
  blur: 15,
})

// 关闭表单，并清除地图上的图标
const closeForm = () => {
  visible.value = false
  // 清除地图上的图标并重置
  mapStore.clearEventGraphics()
  // 清除所有交互，包括画笔
  mapStore.clearInteractions()
}

// 根据事件信息查找对应的要素
const findFeatureByEvent = (event) => {
  if (!originalFeatures.value || originalFeatures.value.length === 0) {
    console.error('没有原始要素数据')
    return null
  }

  console.log('查找要素:', event)
  console.log('原始要素数据:', originalFeatures.value)

  // 查找匹配的要素
  const feature = originalFeatures.value.find((feature) => {
    // 获取要素的属性，OpenLayers中可能在不同位置保存
    const values = feature.get('values_') || feature.getProperties() || {}
    console.log('要素属性:', values)

    if (!values) return false

    // 多种匹配方式，提高匹配成功率
    return (
      values.事件编号 === event.eventId ||
      (values.事件类型 === event.eventType &&
        values.发生时间 === event.eventTime &&
        values.发生地点 === event.eventLocation)
    )
  })

  if (feature) {
    console.log('找到匹配要素:', feature)
  } else {
    console.error('未找到匹配要素')
  }

  return feature
}

// 在地图上查看事件
const viewEventOnMap = (event) => {
  try {
    const feature = findFeatureByEvent(event)
    if (feature) {
      // 获取要素的坐标
      const geometry = feature.getGeometry()
      if (geometry) {
        console.log('要素几何类型:', geometry.getType())

        let coordinates = null
        // 根据几何类型获取坐标
        if (typeof geometry.getCoordinates === 'function') {
          coordinates = geometry.getCoordinates()
          console.log('原始坐标:', coordinates)
        }

        // 确保获取到有效坐标
        if (coordinates) {
          // 不同几何类型有不同的坐标结构
          let validCoordinates = coordinates

          // Point类型
          if (geometry.getType() === 'Point') {
            validCoordinates = coordinates
          }
          // LineString或Polygon类型
          else if (Array.isArray(coordinates) && coordinates.length > 0) {
            // 多边形取第一个环的第一个点
            if (
              Array.isArray(coordinates[0]) &&
              Array.isArray(coordinates[0][0])
            ) {
              validCoordinates = coordinates[0][0]
            }
            // 线取第一个点
            else if (Array.isArray(coordinates[0])) {
              validCoordinates = coordinates[0]
            }
          }

          console.log('处理后坐标:', validCoordinates)

          // 移动地图到该位置
          mapStore.panToLocation(validCoordinates)

          // 高亮显示该要素
          mapStore.highlightFeature(feature)
          return
        }
      }
    }
    console.error('无法获取有效坐标')
  } catch (error) {
    console.error('查看事件失败:', error)
  }
}

// 设置查询结果
const setQueryResult = (results, position, features) => {
  // 保存查询数据
  eventData.value = results || []
  originalFeatures.value = features || []

  // 如果表单未显示过（首次显示），则设置默认位置
  if (!visible.value) {
    const el = queryFormRef.value
    if (el && (!el.style.left || el.style.left === '')) {
      // 使用默认位置
      el.style.left = '50%'
      el.style.bottom = '0'
      el.style.transform = 'translateX(-50%)'
    }
  }

  // 显示表单并重置状态
  visible.value = true
  currentPage.value = 1
  activeTab.value = 'list'

  // 在下一个渲染周期调整图表大小
  setTimeout(() => {
    if (chart) {
      chart.resize()
    }
  }, 100)
}

// 初始化拖拽功能
const initDrag = () => {
  if (!queryFormRef.value || !headerRef.value) return

  const el = queryFormRef.value
  const header = headerRef.value

  header.style.cursor = 'move'

  const onMouseDown = (e) => {
    // 只能通过表头拖拽
    if (!header.contains(e.target)) return

    const disX = e.clientX - el.offsetLeft
    const disY = e.clientY - el.offsetTop

    const onMouseMove = (e) => {
      let left = e.clientX - disX
      let top = e.clientY - disY

      // 更新位置
      el.style.transform = 'none' // 清除transform
      el.style.left = left + 'px'
      el.style.top = top + 'px'
      el.style.bottom = 'auto' // 取消底部定位
    }

    const onMouseUp = () => {
      document.removeEventListener('mousemove', onMouseMove)
      document.removeEventListener('mouseup', onMouseUp)
    }

    document.addEventListener('mousemove', onMouseMove)
    document.addEventListener('mouseup', onMouseUp)

    e.preventDefault()
  }

  header.addEventListener('mousedown', onMouseDown)

  // 返回清理函数
  return () => {
    header.removeEventListener('mousedown', onMouseDown)
  }
}

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return

  // 销毁之前的实例
  if (chart) {
    chart.dispose()
  }

  // 确保DOM已经渲染
  try {
    chart = echarts.init(chartRef.value)

    // 收集数据
    const typeStats = {}
    const levelStats = {}

    // 遍历事件数据
    eventData.value.forEach((event) => {
      // 事件类型统计
      typeStats[event.eventType] = (typeStats[event.eventType] || 0) + 1

      // 事件等级统计
      let levelName = event.eventLevel
      if (levelName === '1') levelName = '轻微'
      else if (levelName === '2') levelName = '一般'
      else if (levelName === '3') levelName = '严重'

      levelStats[levelName] = (levelStats[levelName] || 0) + 1
    })

    // 准备数据
    const typeData = Object.keys(typeStats).map((key) => ({
      name: key,
      value: typeStats[key],
    }))

    const levelData = Object.keys(levelStats).map((key) => ({
      name: key,
      value: levelStats[key],
    }))

    // 配置图表
    const option = {
      title: [
        {
          text: '事件类型分析',
          left: '25%',
          top: '5%',
          textAlign: 'center',
        },
        {
          text: '事件等级分析',
          left: '75%',
          top: '5%',
          textAlign: 'center',
        },
      ],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: [
        {
          orient: 'vertical',
          right: '50%',
          top: 'center',
          data: Object.keys(typeStats),
        },
        {
          orient: 'vertical',
          right: '0%',
          top: 'center',
          data: Object.keys(levelStats),
        },
      ],
      series: [
        {
          name: '事件类型',
          type: 'pie',
          radius: '50%',
          center: ['25%', '60%'],
          data: typeData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          label: {
            show: true,
            formatter: '{b}: {c} ({d}%)',
          },
        },
        {
          name: '事件等级',
          type: 'pie',
          radius: '50%',
          center: ['75%', '60%'],
          data: levelData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          label: {
            show: true,
            formatter: '{b}: {c} ({d}%)',
          },
        },
      ],
    }

    chart.setOption(option)

    // 确保图表正确渲染
    chart.resize()
  } catch (error) {
    console.error('初始化图表失败:', error)
  }
}

// 初始化热力图
const initHeatmap = () => {
  if (!heatmapRef.value) return

  // 销毁之前的实例
  if (heatmap) {
    heatmap.dispose()
  }

  try {
    // 创建地图实例，使用当前的地图
    const map = mapStore.getMap()
    if (!map) {
      console.error('地图实例不存在')
      return
    }

    console.log('初始化热力图，设置:', heatmapSettings.value)

    // 总是清除之前的热力图层
    mapStore.clearHeatMapLayer()

    // 如果不显示热力图，则直接返回
    if (!heatmapSettings.value.showHeatmap) {
      console.log('热力图显示已关闭')
      return
    }

    // 直接在地图上添加热力图
    const heatmapData = []

    // 从事件数据生成热力图数据
    eventData.value.forEach((event) => {
      // 查找对应的要素以获取坐标
      const feature = findFeatureByEvent(event)
      if (feature && feature.getGeometry()) {
        let coordinates = null
        const geometry = feature.getGeometry()

        // 根据几何类型获取坐标
        if (typeof geometry.getCoordinates === 'function') {
          coordinates = geometry.getCoordinates()

          // 处理不同类型的几何体
          if (geometry.getType() === 'Point') {
            // Point类型直接使用坐标
            coordinates = coordinates
          } else if (Array.isArray(coordinates) && coordinates.length > 0) {
            // 多边形取第一个环的第一个点
            if (
              Array.isArray(coordinates[0]) &&
              Array.isArray(coordinates[0][0])
            ) {
              coordinates = coordinates[0][0]
            }
            // 线取第一个点
            else if (Array.isArray(coordinates[0])) {
              coordinates = coordinates[0]
            }
          }
        }

        // 确保坐标是有效的
        if (coordinates) {
          // 热力值基于事件等级
          let weight = 1
          if (event.eventLevel) {
            if (typeof event.eventLevel === 'string') {
              if (event.eventLevel === '轻微' || event.eventLevel === '1')
                weight = 1
              else if (event.eventLevel === '一般' || event.eventLevel === '2')
                weight = 2
              else if (event.eventLevel === '严重' || event.eventLevel === '3')
                weight = 3
              else weight = parseInt(event.eventLevel) || 1
            } else {
              weight = event.eventLevel
            }
          }

          heatmapData.push({
            coordinates: coordinates,
            weight: weight,
            eventType: event.eventType,
          })
        }
      }
    })

    console.log('热力图数据点数量:', heatmapData.length)

    // 添加新的热力图层到地图
    if (heatmapData.length > 0) {
      mapStore.addHeatMapLayer(heatmapData, {
        radius: heatmapSettings.value.radius,
        blur: heatmapSettings.value.blur,
        showBorder: false, // 不再使用边框
      })
    }
  } catch (error) {
    console.error('初始化热力图失败:', error)
  }
}

// 监听热力图设置变化
watch(
  heatmapSettings,
  () => {
    // 重新初始化热力图
    if (activeTab.value === 'heatmap') {
      initHeatmap()
    }
  },
  { deep: true }
)

// 监听标签页切换
watch(activeTab, (newVal) => {
  // 使用定时器延迟初始化图表或热力图，但不改变表单位置
  setTimeout(() => {
    if (newVal === 'chart') {
      // 初始化图表
      initChart()
    } else if (newVal === 'heatmap') {
      // 初始化热力图
      initHeatmap()
    }
  }, 50)
})

// 清理函数
let cleanupDrag = null

// 设置拖拽和监听器
onMounted(() => {
  // 设置初始位置 - 只在初次挂载时设置
  const el = queryFormRef.value
  if (el) {
    // 检查是否已经被拖拽过（有设置过具体的left和top）
    if (!el.style.left || el.style.left === '') {
      // 设置默认位置
      el.style.left = '50%'
      el.style.bottom = '0'
      el.style.transform = 'translateX(-50%)'
    }
  }

  // 设置拖拽
  nextTick(() => {
    cleanupDrag = initDrag()
  })

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

// 清理监听器
onBeforeUnmount(() => {
  if (cleanupDrag) {
    cleanupDrag()
  }
  window.removeEventListener('resize', handleResize)
})

// 窗口大小变化处理
const handleResize = () => {
  if (chart) chart.resize()
}

// 对外暴露方法
defineExpose({
  setQueryResult,
  visible,
})
</script>

<style scoped lang="scss">
.query-form {
  width: 1100px;
  height: 400px; /* 设置固定高度 */
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: auto; /* 添加滚动条，以防内容溢出 */

  .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #ebeef5;
    flex-shrink: 0; /* 防止压缩 */

    .title {
      font-size: 16px;
      font-weight: bold;
    }

    .close-btn {
      padding: 2px;
    }
  }

  .tab-container {
    display: flex;
    flex-direction: column;
    flex: 1; /* 占用剩余空间 */
    overflow: hidden; /* 防止内容溢出 */

    .tab-header {
      display: flex;
      background-color: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;
      padding: 0;
      flex-shrink: 0; /* 防止压缩 */

      .tab-item {
        cursor: pointer;
        padding: 10px 20px;
        color: #606266;
        font-size: 14px;
        border-bottom: 2px solid transparent;
        transition: all 0.3s;

        &.active {
          color: #409eff;
          font-weight: bold;
          border-bottom: 2px solid #409eff;
        }

        &:hover {
          color: #409eff;
        }
      }
    }

    .tab-content {
      padding: 0 10px;
      flex: 1; /* 占用剩余空间 */
      overflow: auto; /* 添加滚动条 */

      .tab-pane {
        height: 100%;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
      }

      .table-container {
        padding: 0;
        overflow: auto; /* 表格内容过多时可滚动 */
        flex: 1;
      }

      .pagination-container {
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        flex-shrink: 0; /* 防止压缩 */
      }
    }
  }

  // 表格样式
  :deep(.el-table) {
    // 移除表格线
    &::before,
    &::after {
      display: none;
    }

    th.el-table__cell {
      border-right: none !important;
    }

    td.el-table__cell {
      border-right: none !important;
    }

    // 简化表格样式
    .el-table__inner-wrapper::before {
      display: none;
    }
  }

  .chart-container,
  .heatmap-container {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1; /* 占用所有可用空间 */
  }

  .chart,
  .heatmap {
    height: 300px; /* 固定高度 */
    flex: 1; /* 占用剩余空间 */
  }

  .settings-panel {
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    flex-shrink: 0; /* 防止压缩 */

    .setting-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0;
      }

      .setting-label {
        width: 140px;
        flex-shrink: 0;
        color: #606266;
      }

      .el-slider {
        flex: 1;
      }
    }
  }
}
</style>
